<template>
  <div class="material-list-page">
    <!-- 顶部搜索栏 -->
    <a-card class="search-card" title="物料查询">
      <a-form :model="searchForm" layout="inline" class="search-form">
        <a-form-item label="物料编码">
          <a-input v-model:value="searchForm.materialCode" placeholder="请输入物料编码" />
        </a-form-item>
        <a-form-item label="原厂料号">
          <a-input v-model:value="searchForm.originalCode" placeholder="请输入原厂料号" />
        </a-form-item>
        <a-form-item label="物料名称">
          <a-input v-model:value="searchForm.materialName" placeholder="请输入物料名称" />
        </a-form-item>
        <a-form-item label="物料类型">
          <a-select v-model:value="searchForm.materialType" placeholder="请选择物料类型" style="width: 200px">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="electronics">电子元件</a-select-option>
            <a-select-option value="mechanical">机械零件</a-select-option>
            <a-select-option value="raw">原材料</a-select-option>
            <a-select-option value="packaging">包装材料</a-select-option>
            <a-select-option value="semiconductor">半导体</a-select-option>
            <a-select-option value="connector">连接器</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">
            <SearchOutlined />
            搜索
          </a-button>
          <a-button style="margin-left: 8px" @click="handleReset">
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 物料列表表格 -->
    <a-card class="table-card">
      <template #title>
        <div class="table-title">
          <span>物料列表</span>
          <a-button type="primary" @click="handleAdd">
            <PlusOutlined />
            新增物料
          </a-button>
        </div>
      </template>

      <a-table
        :columns="columns"
        :data-source="materialList"
        :loading="loading"
        :pagination="false"
        :row-key="record => record.id"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'index'">
            {{ (pagination.current - 1) * pagination.pageSize + record.index }}
          </template>
          <template v-if="column.key === 'operation'">
            <a-space>
              <a-button type="link" size="small" @click="handleView(record)">
                查看
              </a-button>
              <a-button type="link" size="small" @click="handleEdit(record)">
                修改
              </a-button>
              <a-popconfirm
                title="确认删除该物料？"
                @confirm="handleDelete(record)"
              >
                <a-button type="link" size="small" danger>
                  <span>删除</span>
                </a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </a-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <a-pagination
          v-model:current="pagination.current"
          v-model:pageSize="pagination.pageSize"
          :total="pagination.total"
          :show-total="total => `共 ${total} 条记录`"
          :show-size-changer="true"
          :page-size-options="['10', '20', '50', '100']"
          @change="handlePageChange"
        />
      </div>
    </a-card>

    <!-- 查看物料详情模态框 -->
    <a-modal
      v-model:open="viewModalVisible"
      title="物料详情"
      :footer="null"
      width="800px"
    >
      <a-descriptions :column="2" bordered>
        <a-descriptions-item label="物料编码">{{ currentMaterial.materialCode }}</a-descriptions-item>
        <a-descriptions-item label="物料名称">{{ currentMaterial.materialName }}</a-descriptions-item>
        <a-descriptions-item label="原厂料号">{{ currentMaterial.originalCode }}</a-descriptions-item>
        <a-descriptions-item label="物料分类">{{ currentMaterial.category }}</a-descriptions-item>
        <a-descriptions-item label="品牌">{{ currentMaterial.brand }}</a-descriptions-item>
        <a-descriptions-item label="最小包装">{{ currentMaterial.minPackage }}</a-descriptions-item>
        <a-descriptions-item label="物料描述" :span="2">{{ currentMaterial.description }}</a-descriptions-item>
      </a-descriptions>
    </a-modal>

    <!-- 新增/编辑物料模态框 -->
    <a-modal
      v-model:open="editModalVisible"
      :title="editingId ? '编辑物料' : '新增物料'"
      :width="800"
      :body-style="{ padding: '24px' }"
      @ok="handleSaveMaterial"
      @cancel="handleCloseEditModal"
    >
      <a-form ref="editFormRef" :model="materialForm" :rules="formRules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="物料编码" name="materialCode">
              <a-input v-model:value="materialForm.materialCode" placeholder="请输入物料编码" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="物料名称" name="materialName">
              <a-input v-model:value="materialForm.materialName" placeholder="请输入物料名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="原厂料号" name="originalCode">
              <a-input v-model:value="materialForm.originalCode" placeholder="请输入原厂料号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="物料分类" name="category">
              <a-select v-model:value="materialForm.category" placeholder="请选择物料分类">
                <a-select-option value="electronics">电子元件</a-select-option>
                <a-select-option value="mechanical">机械零件</a-select-option>
                <a-select-option value="raw">原材料</a-select-option>
                <a-select-option value="packaging">包装材料</a-select-option>
                <a-select-option value="semiconductor">半导体</a-select-option>
                <a-select-option value="connector">连接器</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="品牌" name="brand">
              <a-input v-model:value="materialForm.brand" placeholder="请输入品牌" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="最小包装" name="minPackage">
              <a-input v-model:value="materialForm.minPackage" placeholder="请输入最小包装" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="物料描述" name="description" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
              <a-textarea v-model:value="materialForm.description" placeholder="请输入物料描述" :rows="3" />
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 包装单位表格 -->
        <a-divider orientation="left">包装单位</a-divider>
        <a-table
          :columns="packagingColumns"
          :data-source="materialForm.packagingDetails"
          :pagination="false"
          size="small"
          bordered
        >
          <template #bodyCell="{ column, index }">
            <template v-if="column.key === 'operation'">
              <a-space>
                <a-button type="link" size="small" @click="editPackagingDetail(index)">编辑</a-button>
                <a-button type="link" size="small" danger @click="removePackagingDetail(index)">删除</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
        <a-button type="dashed" style="width: 100%; margin-top: 8px" @click="addPackagingDetail">
          <PlusOutlined /> 添加包装单位
        </a-button>

        <!-- 物料参数表格 -->
        <a-divider orientation="left">物料参数</a-divider>
        <a-table
          :columns="parameterColumns"
          :data-source="materialForm.parameters"
          :pagination="false"
          size="small"
          bordered
        >
          <template #bodyCell="{ column, index }">
            <template v-if="column.key === 'operation'">
              <a-space>
                <a-button type="link" size="small" @click="editParameter(index)">编辑</a-button>
                <a-button type="link" size="small" danger @click="removeParameter(index)">删除</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
        <a-button type="dashed" style="width: 100%; margin-top: 8px" @click="addParameter">
          <PlusOutlined /> 添加物料参数
        </a-button>
      </a-form>
    </a-modal>

    <!-- 包装详情编辑模态框 -->
    <a-modal
      v-model:open="packagingModalVisible"
      title="编辑包装详情"
      @ok="savePackagingDetail"
      @cancel="cancelPackagingDetail"
    >
      <a-form :model="currentPackagingDetail" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="序号">
          <a-input-number v-model:value="currentPackagingDetail.sequence" :min="1" style="width: 100%" />
        </a-form-item>
        <a-form-item label="换算数量">
          <a-input-number v-model:value="currentPackagingDetail.conversionQuantity" :min="1" style="width: 100%" />
        </a-form-item>
        <a-form-item label="单位">
          <a-input v-model:value="currentPackagingDetail.unit" placeholder="如：个、盒、箱" />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model:value="currentPackagingDetail.remark" placeholder="请输入备注" :rows="2" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 参数编辑模态框 -->
    <a-modal
      v-model:open="parameterModalVisible"
      title="编辑参数"
      @ok="saveParameter"
      @cancel="cancelParameter"
    >
      <a-form :model="currentParameter" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="序号">
          <a-input-number v-model:value="currentParameter.sequence" :min="1" style="width: 100%" />
        </a-form-item>
        <a-form-item label="参数名称">
          <a-input v-model:value="currentParameter.name" placeholder="如：尺寸、重量、材质" />
        </a-form-item>
        <a-form-item label="参数值">
          <a-input v-model:value="currentParameter.value" placeholder="请输入参数值" />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model:value="currentParameter.remark" placeholder="请输入备注" :rows="2" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue'

interface Material {
  id: string
  materialCode: string
  materialName: string
  category: string
  description: string
  originalCode: string
  brand: string
  minPackage: string
  index: number
  packagingDetails?: PackagingDetail[]
  parameters?: MaterialParameter[]
}

interface SearchForm {
  materialCode: string
  originalCode: string
  materialName: string
  materialType: string
}

interface Pagination {
  current: number
  pageSize: number
  total: number
}

interface PackagingDetail {
  key: string
  sequence: number
  conversionQuantity: number
  unit: string
  remark: string
}

interface MaterialParameter {
  key: string
  sequence: number
  name: string
  value: string
  remark: string
}

interface MaterialForm {
  materialCode: string
  materialName: string
  category: string
  description: string
  originalCode: string
  brand: string
  minPackage: string
  packagingDetails: PackagingDetail[]
  parameters: MaterialParameter[]
}

const loading = ref(false)

// 搜索表单
const searchForm = reactive<SearchForm>({
  materialCode: '',
  originalCode: '',
  materialName: '',
  materialType: ''
})

// 分页配置
const pagination = reactive<Pagination>({
  current: 1,
  pageSize: 10,
  total: 0
})

// 表格列配置
const columns = [
  {
    title: '序号',
    key: 'index',
    width: 80,
    align: 'center'
  },
  {
    title: '物料编码',
    dataIndex: 'materialCode',
    key: 'materialCode',
    width: 120
  },
  {
    title: '物料名称',
    dataIndex: 'materialName',
    key: 'materialName',
    width: 150
  },
  {
    title: '物料分类',
    dataIndex: 'category',
    key: 'category',
    width: 100
  },
  {
    title: '物料描述',
    dataIndex: 'description',
    key: 'description',
    ellipsis: true
  },
  {
    title: '原厂料号',
    dataIndex: 'originalCode',
    key: 'originalCode',
    width: 120
  },
  {
    title: '品牌',
    dataIndex: 'brand',
    key: 'brand',
    width: 100
  },
  {
    title: '最小包装',
    dataIndex: 'minPackage',
    key: 'minPackage',
    width: 100
  },
  {
    title: '操作',
    key: 'operation',
    width: 150,
    fixed: 'right' as const
  }
]

// 包装单位表格列
const packagingColumns = [
  { title: '序号', dataIndex: 'sequence', key: 'sequence', width: 80 },
  { title: '换算数量', dataIndex: 'conversionQuantity', key: 'conversionQuantity', width: 100 },
  { title: '单位', dataIndex: 'unit', key: 'unit', width: 100 },
  { title: '备注', dataIndex: 'remark', key: 'remark' },
  { title: '操作', key: 'operation', width: 120 }
]

// 物料参数表格列
const parameterColumns = [
  { title: '序号', dataIndex: 'sequence', key: 'sequence', width: 80 },
  { title: '参数名称', dataIndex: 'name', key: 'name', width: 150 },
  { title: '参数值', dataIndex: 'value', key: 'value', width: 150 },
  { title: '备注', dataIndex: 'remark', key: 'remark' },
  { title: '操作', key: 'operation', width: 120 }
]

// 物料列表数据
const materialList = ref<Material[]>([])

// 模态框相关
const viewModalVisible = ref(false)
const editModalVisible = ref(false)
const packagingModalVisible = ref(false)
const parameterModalVisible = ref(false)

const editFormRef = ref()
const editingId = ref<string | null>(null)

// 当前物料数据
const currentMaterial = ref<Material>({} as Material)

// 表单数据
const materialForm = reactive<MaterialForm>({
  materialCode: '',
  materialName: '',
  category: '',
  description: '',
  originalCode: '',
  brand: '',
  minPackage: '',
  packagingDetails: [],
  parameters: []
})

// 表单验证规则
const formRules = {
  materialCode: [{ required: true, message: '请输入物料编码', trigger: 'blur' }],
  materialName: [{ required: true, message: '请输入物料名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择物料分类', trigger: 'change' }],
  minPackage: [{ required: true, message: '请输入最小包装', trigger: 'blur' }]
}

// 包装详情相关
const currentPackagingIndex = ref(-1)
const currentPackagingDetail = reactive<PackagingDetail>({
  key: '',
  sequence: 0,
  conversionQuantity: 1,
  unit: '',
  remark: ''
})

// 参数相关
const currentParameterIndex = ref(-1)
const currentParameter = reactive<MaterialParameter>({
  key: '',
  sequence: 0,
  name: '',
  value: '',
  remark: ''
})

// 模拟数据
const mockData: Material[] = [
  {
    id: '1',
    materialCode: 'MAT001',
    materialName: '钢网',
    category: '机械零件',
    description: '精密钢网，用于PCB印刷，厚度0.12mm',
    originalCode: 'STENCIL-001',
    brand: 'MISUMI',
    minPackage: '1片',
    index: 1
  },
  {
    id: '2',
    materialCode: 'MAT002',
    materialName: 'CBB电容',
    category: '电子元件',
    description: '聚丙烯薄膜电容，容量2.2uF，耐压400V',
    originalCode: 'CBB22-2.2uF',
    brand: 'EPCOS',
    minPackage: '100个',
    index: 2
  },
  {
    id: '3',
    materialCode: 'MAT003',
    materialName: '连接器',
    category: '连接器',
    description: '2.54mm间距排针，单排8PIN，直插式',
    originalCode: 'HDR-2.54-8P',
    brand: 'JST',
    minPackage: '50个',
    index: 3
  },
  {
    id: '4',
    materialCode: 'MAT004',
    materialName: '贴片电阻',
    category: '电子元件',
    description: '厚膜贴片电阻，阻值1kΩ，功率1/8W，精度±1%',
    originalCode: '0805-1K-1%',
    brand: 'VISHAY',
    minPackage: '5000个',
    index: 4
  },
  {
    id: '5',
    materialCode: 'MAT005',
    materialName: '芯片',
    category: '半导体',
    description: 'STM32F103微控制器，ARM Cortex-M3内核',
    originalCode: 'STM32F103C8T6',
    brand: 'ST',
    minPackage: '10个',
    index: 5
  },
  {
    id: '6',
    materialCode: 'MAT006',
    materialName: '电解电容',
    category: '电子元件',
    description: '铝电解电容，容量100uF，耐压25V，尺寸6.3*11mm',
    originalCode: 'EC-100uF-25V',
    brand: 'NICHICON',
    minPackage: '500个',
    index: 6
  },
  {
    id: '7',
    materialCode: 'MAT007',
    materialName: '贴片电感',
    category: '电子元件',
    description: '贴片功率电感，感值10uH，额定电流2A',
    originalCode: 'CDRH104R-10uH',
    brand: 'TDK',
    minPackage: '1000个',
    index: 7
  },
  {
    id: '8',
    materialCode: 'MAT008',
    materialName: '晶体振荡器',
    category: '电子元件',
    description: '无源晶振，频率8MHz，负载电容20pF',
    originalCode: 'HC-49S-8MHz',
    brand: 'EPSON',
    minPackage: '100个',
    index: 8
  },
  {
    id: '9',
    materialCode: 'MAT009',
    materialName: 'LED灯珠',
    category: '电子元件',
    description: '贴片LED，红色，尺寸0603，亮度100mcd',
    originalCode: 'LED-0603-R',
    brand: 'OSRAM',
    minPackage: '2000个',
    index: 9
  },
  {
    id: '10',
    materialCode: 'MAT010',
    materialName: '保险丝',
    category: '电子元件',
    description: '贴片保险丝，额定电流2A，耐压32V',
    originalCode: 'SMD-2A-32V',
    brand: 'LITTELFUSE',
    minPackage: '1000个',
    index: 10
  }
]

// 获取物料列表
const fetchMaterialList = async () => {
  loading.value = true
  try {
    // 模拟API延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 根据搜索条件过滤数据
    let filteredData = [...mockData]
    
    if (searchForm.materialCode) {
      filteredData = filteredData.filter(item => 
        item.materialCode.toLowerCase().includes(searchForm.materialCode.toLowerCase())
      )
    }
    
    if (searchForm.originalCode) {
      filteredData = filteredData.filter(item => 
        item.originalCode.toLowerCase().includes(searchForm.originalCode.toLowerCase())
      )
    }
    
    if (searchForm.materialName) {
      filteredData = filteredData.filter(item => 
        item.materialName.toLowerCase().includes(searchForm.materialName.toLowerCase())
      )
    }
    
    if (searchForm.materialType) {
      filteredData = filteredData.filter(item => 
        item.category.toLowerCase().includes(searchForm.materialType.toLowerCase())
      )
    }
    
    // 设置分页
    pagination.total = filteredData.length
    
    // 计算当前页数据
    const startIndex = (pagination.current - 1) * pagination.pageSize
    const endIndex = startIndex + pagination.pageSize
    materialList.value = filteredData.slice(startIndex, endIndex).map((item, index) => ({
      ...item,
      index: startIndex + index + 1
    }))
    
  } catch (error) {
    message.error('获取物料列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索功能
const handleSearch = () => {
  pagination.current = 1
  fetchMaterialList()
}

// 重置搜索
const handleReset = () => {
  searchForm.materialCode = ''
  searchForm.originalCode = ''
  searchForm.materialName = ''
  searchForm.materialType = ''
  pagination.current = 1
  fetchMaterialList()
}

// 分页变化
const handlePageChange = (page: number, pageSize: number) => {
  pagination.current = page
  pagination.pageSize = pageSize
  fetchMaterialList()
}

// 新增物料
const handleAdd = () => {
  editingId.value = null
  resetMaterialForm()
  editModalVisible.value = true
}

// 查看详情
const handleView = (record: Material) => {
  currentMaterial.value = record
  viewModalVisible.value = true
}

// 修改物料
const handleEdit = (record: Material) => {
  editingId.value = record.id
  // 填充表单数据
  Object.assign(materialForm, {
    materialCode: record.materialCode,
    materialName: record.materialName,
    category: record.category.toLowerCase(),
    description: record.description,
    originalCode: record.originalCode,
    brand: record.brand,
    minPackage: record.minPackage,
    packagingDetails: record.packagingDetails || [],
    parameters: record.parameters || []
  })
  editModalVisible.value = true
}

// 重置表单
const resetMaterialForm = () => {
  Object.assign(materialForm, {
    materialCode: '',
    materialName: '',
    category: '',
    description: '',
    originalCode: '',
    brand: '',
    minPackage: '',
    packagingDetails: [],
    parameters: []
  })
}

// 保存物料
const handleSaveMaterial = async () => {
  try {
    await editFormRef.value?.validate()
    loading.value = true
    
    // 模拟保存操作
    await new Promise(resolve => setTimeout(resolve, 500))
    
    if (editingId.value) {
      // 编辑模式
      const index = mockData.findIndex(item => item.id === editingId.value)
      if (index > -1) {
        mockData[index] = {
          ...mockData[index],
          ...materialForm,
          category: materialForm.category
        }
      }
      message.success('修改成功')
    } else {
      // 新增模式
      const newMaterial: Material = {
        id: Date.now().toString(),
        ...materialForm,
        index: 0,
        category: materialForm.category
      }
      mockData.unshift(newMaterial)
      message.success('新增成功')
    }
    
    editModalVisible.value = false
    resetMaterialForm()
    fetchMaterialList()
  } catch (error) {
    message.error('请检查表单填写是否正确')
  } finally {
    loading.value = false
  }
}

// 关闭编辑模态框
const handleCloseEditModal = () => {
  editModalVisible.value = false
  resetMaterialForm()
}

// 包装详情表格操作
const addPackagingDetail = () => {
  currentPackagingIndex.value = -1
  Object.assign(currentPackagingDetail, {
    key: Date.now().toString(),
    sequence: materialForm.packagingDetails.length + 1,
    conversionQuantity: 1,
    unit: '',
    remark: ''
  })
  packagingModalVisible.value = true
}

const editPackagingDetail = (index: number) => {
  currentPackagingIndex.value = index
  Object.assign(currentPackagingDetail, materialForm.packagingDetails[index])
  packagingModalVisible.value = true
}

const removePackagingDetail = (index: number) => {
  materialForm.packagingDetails.splice(index, 1)
}

const savePackagingDetail = () => {
  if (currentPackagingIndex.value >= 0) {
    materialForm.packagingDetails[currentPackagingIndex.value] = { ...currentPackagingDetail }
  } else {
    materialForm.packagingDetails.push({ ...currentPackagingDetail })
  }
  packagingModalVisible.value = false
}

const cancelPackagingDetail = () => {
  packagingModalVisible.value = false
}

// 参数表格操作
const addParameter = () => {
  currentParameterIndex.value = -1
  Object.assign(currentParameter, {
    key: Date.now().toString(),
    sequence: materialForm.parameters.length + 1,
    name: '',
    value: '',
    remark: ''
  })
  parameterModalVisible.value = true
}

const editParameter = (index: number) => {
  currentParameterIndex.value = index
  Object.assign(currentParameter, materialForm.parameters[index])
  parameterModalVisible.value = true
}

const removeParameter = (index: number) => {
  materialForm.parameters.splice(index, 1)
}

const saveParameter = () => {
  if (currentParameterIndex.value >= 0) {
    materialForm.parameters[currentParameterIndex.value] = { ...currentParameter }
  } else {
    materialForm.parameters.push({ ...currentParameter })
  }
  parameterModalVisible.value = false
}

const cancelParameter = () => {
  parameterModalVisible.value = false
}

// 删除物料
const handleDelete = async (_record: Material) => {
  try {
    loading.value = true
    // 模拟API删除
    await new Promise(resolve => setTimeout(resolve, 500))
    message.success('删除成功')
    fetchMaterialList()
  } catch (error) {
    message.error('删除失败')
  } finally {
    loading.value = false
  }
}

// 初始化
onMounted(() => {
  fetchMaterialList()
})
</script>

<style scoped lang="scss">
.material-list-page {
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;

  .search-card {
    margin-bottom: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    :deep(.ant-card-body) {
      padding: 24px;
    }
  }

  .search-form {
    .ant-form-item {
      margin-bottom: 16px;
    }
  }

  .table-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .table-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .pagination-container {
    margin-top: 24px;
    text-align: right;
  }

  :deep(.ant-table-thead > tr > th) {
    background: #fafafa;
    font-weight: 600;
  }

  :deep(.ant-card-head) {
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
  }
}
</style>